<!DOCTYPE html>
<html lang="zh-CN">

<!-- Mirrored from www.mdui.org/docs/helper by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 22 Jan 2022 13:01:55 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="renderer" content="webkit"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=5.0">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <title>辅助类 - MDUI 开发文档, Material Design 前端框架</title>
  <meta name="description" content="currentItem.description" />
  <link rel="preconnect" href="http://cdn.w3cbus.com/">
  <link rel="stylesheet" href="../../cdn.w3cbus.com/library/mdui/1.0.2/css/mdui.min.css"><link rel="stylesheet" href="../../cdn.w3cbus.com/mdui/docs_1/static/index.0132e177.css">
  
  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  '../../www.googletagmanager.com/gtm5445.html?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-K3T2R6S');</script>
  <!-- End Google Tag Manager -->
  <script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"mdui官网","item":"https://www.mdui.org"},{"@type":"ListItem","position":2,"name":"mdui v1文档","item":"https://www.mdui.org/docs/"},{"@type":"ListItem","position":3,"name":"辅助类"}]}</script>
  <script async src="../../pagead2.googlesyndication.com/pagead/js/adsbygooglee7db.js?client=ca-pub-4466345895756968" crossorigin="anonymous"></script>
</head>
<body
  class="
    mdui-drawer-body-left
    mdui-appbar-with-toolbar
    mdui-theme-primary-indigo
    mdui-theme-accent-pink
    mdui-theme-layout-auto"
  id="p-d"
>
<header class="appbar mdui-appbar mdui-appbar-fixed">
  <div class="mdui-toolbar mdui-color-theme">
    <span
      class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
      mdui-drawer="{target: '#main-drawer', swipe: true}"
    >
      <i class="mdui-icon material-icons">menu</i>
    </span>
    <a href="https://www.mdui.org/" class="mdui-typo-headline mdui-hidden-xs">MDUI</a>
    <a href="index.html" class="mdui-typo-title">文档</a>
    <div class="mdui-toolbar-spacer"></div>
    <span
      class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
      mdui-dialog="{target: '#dialog-docs-theme'}"
      mdui-tooltip="{content: '设置主题'}"
    >
      <i class="mdui-icon material-icons">color_lens</i>
    </span>
    <a
      href="https://github.com/zdhxiong/mdui"
      target="_blank"
      class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
      mdui-tooltip="{content: '查看 Github'}"
    >
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve" class="mdui-icon" style="width: 24px;height:24px;">
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#ffffff" d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4c-0.2-0.4-0.7-2.1,0.2-4.3c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C34.3,8.7,27,1.4,18,1.4z"></path>
      </svg>
    </a>
  </div>
</header>
<div class="mdui-drawer" id="main-drawer">
  <div class="mdui-list" mdui-collapse="{accordion: true}" style="margin-bottom: 76px;">
    <div class="
          mdui-collapse-item
          "
        >
          <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
            <i class="
              mdui-list-item-icon
              mdui-icon
              material-icons
              mdui-text-color-blue"
            >near_me</i>
            <div class="mdui-list-item-content">开始使用</div>
            <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
          </div>
          <div class="mdui-collapse-item-body mdui-list">
            <a
                  href="introduction.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >简介</a><a
                  href="download.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >下载</a><a
                  href="compatibility.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >兼容性</a><a
                  href="jq.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >JavaScript 工具库</a><a
                  href="global.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >JavaScript 全局方法</a><a
                  href="migration.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >从 0.4.3 升级到 1.0.0</a>
          </div>
        </div><div class="
          mdui-collapse-item
          mdui-collapse-item-open"
        >
          <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
            <i class="
              mdui-list-item-icon
              mdui-icon
              material-icons
              mdui-text-color-deep-orange"
            >layers</i>
            <div class="mdui-list-item-content">样式</div>
            <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
          </div>
          <div class="mdui-collapse-item-body mdui-list">
            <a
                  href="color.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >颜色与主题</a><a
                  href="font.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >字体</a><a
                  href="grid.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >网格布局</a><a
                  href="typo.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >排版</a><a
                  href="icon.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >图标</a><a
                  href="media.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >媒体</a><a
                  href="helper.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    mdui-list-item-active"
                >辅助类</a><a
                  href="shadow.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >阴影</a>
          </div>
        </div><div class="
          mdui-collapse-item
          "
        >
          <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
            <i class="
              mdui-list-item-icon
              mdui-icon
              material-icons
              mdui-text-color-green"
            >widgets</i>
            <div class="mdui-list-item-content">组件</div>
            <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
          </div>
          <div class="mdui-collapse-item-body mdui-list">
            <a
                  href="ripple.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >涟漪动画效果</a><a
                  href="button.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >按钮</a><a
                  href="fab.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >浮动操作按钮</a><a
                  href="select.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >下拉选择</a><a
                  href="divider.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >分隔线</a><a
                  href="panel.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >可扩展面板</a><a
                  href="textfield.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >文本框</a><a
                  href="selection_control.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >选择控件</a><a
                  href="slider.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >滑块</a><a
                  href="list.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >列表</a><a
                  href="list_control.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >列表控制</a><a
                  href="grid_list.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >网格列表</a><a
                  href="tab.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >Tab 选项卡</a><a
                  href="toolbar.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >工具栏</a><a
                  href="appbar.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >应用栏</a><a
                  href="drawer.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >抽屉式导航</a><a
                  href="bottom_nav.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >底部导航栏</a><a
                  href="card.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >卡片</a><a
                  href="chip.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >纸片</a><a
                  href="tooltip.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >工具提示</a><a
                  href="snackbar.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >Snackbar</a><a
                  href="table.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >表格</a><a
                  href="dialog.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >对话框</a><a
                  href="menu.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >菜单</a><a
                  href="progress.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >进度指示器</a>
          </div>
        </div><div class="
          mdui-collapse-item
          "
        >
          <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
            <i class="
              mdui-list-item-icon
              mdui-icon
              material-icons
              mdui-text-color-brown"
            >view_carousel</i>
            <div class="mdui-list-item-content">JavaScript 插件</div>
            <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
          </div>
          <div class="mdui-collapse-item-body mdui-list">
            <a
                  href="collapse.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >Collapse</a><a
                  href="headroom.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >Headroom</a>
          </div>
        </div><div class="
          mdui-collapse-item
          "
        >
          <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
            <i class="
              mdui-list-item-icon
              mdui-icon
              material-icons
              mdui-text-color-purple"
            >local_mall</i>
            <div class="mdui-list-item-content">资源</div>
            <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
          </div>
          <div class="mdui-collapse-item-body mdui-list">
            <a
                  href="material_icon.html"
                  class="
                    mdui-list-item
                    mdui-ripple
                    "
                >Material 图标</a>
          </div>
        </div>
  </div>
</div>
<a id="anchor-top"></a>


<div class="container p-helper mdui-container">
  <h1 class="title mdui-text-color-theme">辅助类</h1>

  <nav class="toc mdui-text-color-theme">
    <ul>
      <li><a href="#spacing">边距</a></li>
      <li><a href="#float">快速浮动</a></li>
      <li><a href="#center">水平居中</a></li>
      <li><a href="#valign">垂直居中</a></li>
      <li><a href="#text-align">水平对齐方式</a></li>
      <li><a href="#text-transform">文本大小写转换</a></li>
      <li><a href="#text-truncate">文本自动截断</a></li>
      <li><a href="#clearfix">清除浮动</a></li>
      <li><a href="#visible">隐藏内容</a></li>
      <li><a href="#responsive-utilities">响应式工具</a></li>
    </ul>
  </nav>

  <ins class="adsbygoogle"
  style="display:block;margin-top: 40px;"
  data-ad-client="ca-pub-4466345895756968"
  data-ad-slot="3103002934"
  
  
  data-ad-format="auto"
  data-full-width-responsive="true"
></ins>
  <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
      </script>

  <div class="chapter">
    <div class="mdui-typo">
      <h2 class="chapter-title chapter-title-first mdui-text-color-theme">边距 <a class="anchor" id="spacing"></a></h2>
    </div>

    <div class="mdui-typo">
      <p>这一系列工具类可以为元素添加 <code>margin</code> 和 <code>padding</code>，默认值都是 8px 的倍数。</p>
      <p>类名格式为：<code>.mdui-{属性}-{方向}-{大小}</code></p>
      <p>属性：</p>
      <ul>
        <li><code>m</code> - 设置 <code>margin</code></li>
        <li><code>p</code> - 设置 <code>padding</code></li>
      </ul>
      <p>方向：</p>
      <ul>
        <li><code>t</code> - 设置 <code>margin-top</code> 或 <code>padding-top</code></li>
        <li><code>b</code> - 设置 <code>margin-bottom</code> 或 <code>padding-bottom</code></li>
        <li><code>l</code> - 设置 <code>margin-left</code> 或 <code>padding-left</code></li>
        <li><code>r</code> - 设置 <code>margin-right</code> 或 <code>padding-right</code></li>
        <li><code>x</code> - 设置 <code>margin-left</code><code>margin-right</code> 或 <code>padding-left</code><code>padding-right</code></li>
        <li><code>y</code> - 设置 <code>margin-top</code><code>margin-bottom</code> 或 <code>padding-top</code><code>padding-bottom</code></li>
        <li><code>a</code> - 设置 <code>margin</code> 或 <code>padding</code></li>
      </ul>
      <p>大小：</p>
      <ul>
        <li><code>0</code> - 0px</li>
        <li><code>1</code> - 8px</li>
        <li><code>2</code> - 16px</li>
        <li><code>3</code> - 24px</li>
        <li><code>4</code> - 32px</li>
        <li><code>5</code> - 40px</li>
      </ul>

      <pre><code class="language-css">.mdui-m-t-0 {
  margin-top: 0 !important;
}

.mdui-m-l-1 {
  margin-left: 8px !important;
}

.mdui-p-x-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.mdui-p-a-5 {
  padding: 40px !important;
}</code></pre>
    </div>


    <div class="mdui-typo">
      <h2 class="chapter-title mdui-text-color-theme">快速浮动 <a class="anchor" id="float"></a></h2>
      <ul>
        <li><code>.mdui-float-left</code> 使元素向左浮动</li>
        <li><code>.mdui-float-right</code> 使元素向右浮动</li>
      </ul>
    </div>
    <div class="example">
      <div class="example-tools">
  <a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}">
        <i class="mdui-icon material-icons">code</i>
      </a>
  
</div>
<div class="example-demo-label">Example</div>
      <div class="example-demo">
        <div class="mdui-clearfix">
          <div class="mdui-float-left bg box-padding mdui-m-b-0">float left</div>
          <div class="mdui-float-right bg box-padding mdui-m-b-0">float right</div>
        </div>
      </div>
      <pre class="example-code"><code class="language-html">&lt;div class=&quot;mdui-float-left&quot;&gt;float left&lt;/div&gt;
&lt;div class=&quot;mdui-float-right&quot;&gt;float right&lt;/div&gt;</code></pre>
    </div>


    <div class="mdui-typo">
      <h2 class="chapter-title mdui-text-color-theme">水平居中 <a class="anchor" id="center"></a></h2>
      <p>为任意元素添加类 <code>.mdui-center</code> 即可使其水平居中。</p>
    </div>
    <div class="example">
      <div class="example-tools">
  <a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}">
        <i class="mdui-icon material-icons">code</i>
      </a>
  
</div>
<div class="example-demo-label">Example</div>
      <div class="example-demo">
        <div class="mdui-center bg box-padding mdui-m-b-0" style="width: 200px;">mdui-center</div>
      </div>
      <pre class="example-code"><code class="language-html">&lt;div class=&quot;mdui-center&quot; style=&quot;width: 200px&quot;&gt;mdui-center&lt;/div&gt;</code></pre>
    </div>


    <div class="mdui-typo">
      <h2 class="chapter-title mdui-text-color-theme">垂直居中 <a class="anchor" id="valign"></a></h2>

      <ins class="adsbygoogle"
  style="display:block;margin-bottom: 30px;"
  data-ad-client="ca-pub-4466345895756968"
  data-ad-slot="6410619709"
  
  
  data-ad-format="auto"
  data-full-width-responsive="true"
></ins>
  <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
      </script>

      <p>为任意元素添加类 <code>.mdui-valign</code>，即可使该元素中的子元素垂直居中。</p>
    </div>
    <div class="example">
      <div class="example-tools">
  <a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}">
        <i class="mdui-icon material-icons">code</i>
      </a>
  
</div>
<div class="example-demo-label">Example</div>
      <div class="example-demo">
        <div class="mdui-valign bg" style="height: 200px;">
          <p class="mdui-center">This should be vertically aligned</p>
        </div>
      </div>
      <pre class="example-code"><code class="language-html">&lt;div class=&quot;mdui-valign&quot;&gt;
  &lt;p class=&quot;mdui-center&quot;&gt;This should be vertically aligned&lt;/p&gt;
&lt;/div&gt;</code></pre>
    </div>


    <div class="mdui-typo">
      <h2 class="chapter-title mdui-text-color-theme">水平对齐方式 <a class="anchor" id="text-align"></a></h2>
      <ul>
        <li><code>.mdui-text-left</code> 使文本左对齐。</li>
        <li><code>.mdui-text-center</code> 使文本居中对齐。</li>
        <li><code>.mdui-text-right</code> 使文本右对齐。</li>
      </ul>
    </div>
    <div class="example">
      <div class="example-tools">
  <a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}">
        <i class="mdui-icon material-icons">code</i>
      </a>
  
</div>
<div class="example-demo-label">Example</div>
      <div class="example-demo">
        <div class="mdui-text-left bg box-padding" style="margin-bottom: 10px;">This should be left aligned</div>
        <div class="mdui-text-center bg box-padding" style="margin-bottom: 10px;">This should be center aligned</div>
        <div class="mdui-text-right bg box-padding mdui-m-b-0">This should be right aligned</div>
      </div>
      <pre class="example-code"><code class="language-html">&lt;div class=&quot;mdui-text-left&quot;&gt;This should be left aligned&lt;/div&gt;
&lt;div class=&quot;mdui-text-center&quot;&gt;This should be center aligned&lt;/div&gt;
&lt;div class=&quot;mdui-text-right&quot;&gt;This should be right aligned&lt;/div&gt;</code></pre>
    </div>



    <div class="mdui-typo">
      <h2 class="chapter-title mdui-text-color-theme">文本大小写转换 <a class="anchor" id="text-transform"></a></h2>
      <ul>
        <li><code>.mdui-text-lowercase</code> 把文本转为小写。</li>
        <li><code>.mdui-text-uppercase</code> 把文本转为大写。</li>
        <li><code>.mdui-text-capitalize</code> 把文本转为单词的首字母大写。</li>
      </ul>
    </div>
    <div class="example">
      <div class="example-tools">
  <a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}">
        <i class="mdui-icon material-icons">code</i>
      </a>
  
</div>
<div class="example-demo-label">Example</div>
      <div class="example-demo">
        <p class="mdui-text-lowercase">Lowercased text.</p>
        <p class="mdui-text-uppercase">Uppercased text.</p>
        <p class="mdui-text-capitalize">Capitalized text.</p>
      </div>
      <pre class="example-code"><code class="language-html">&lt;p class=&quot;mdui-text-lowercase&quot;&gt;Lowercased text.&lt;/p&gt;
&lt;p class=&quot;mdui-text-uppercase&quot;&gt;Uppercased text.&lt;/p&gt;
&lt;p class=&quot;mdui-text-capitalize&quot;&gt;Capitalized text.&lt;/p&gt;</code></pre>
    </div>


    <div class="mdui-typo">
      <h2 class="chapter-title mdui-text-color-theme">文本自动截断 <a class="anchor" id="text-truncate"></a></h2>
      <p><code>.mdui-text-truncate</code> 可以在文本长度超出限制时，自动截断，并用省略号代替。</p>
    </div>
    <div class="example">
      <div class="example-tools">
  <a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}">
        <i class="mdui-icon material-icons">code</i>
      </a>
  
</div>
<div class="example-demo-label">Example</div>
      <div class="example-demo">
        <p class="mdui-text-truncate" style="max-width: 200px;">这是一段非常非常非常非常非常非常非常非常非常非常非常非常长的文字。</p>
      </div>
      <pre class="example-code"><code class="language-html">&lt;p class=&quot;mdui-text-truncate&quot; style=&quot;max-width: 200px;&quot;&gt;这是一段非常非常非常非常非常非常非常非常非常非常非常非常长的文字。&lt;/p&gt;</code></pre>
    </div>


    <div class="mdui-typo">
      <h2 class="chapter-title mdui-text-color-theme">清除浮动 <a class="anchor" id="clearfix"></a></h2>
      <p>为父元素添加 <code>.mdui-clearfix</code> 类可以清除浮动</p>
    </div>
    <div class="example">
      <div class="example-tools">
  <a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}">
        <i class="mdui-icon material-icons">code</i>
      </a>
  
</div>
<div class="example-demo-label">Example</div>
      <div class="example-demo">
        <div class="mdui-clearfix bg box-padding mdui-m-b-0">
          <div class="mdui-float-left bg box-padding mdui-m-b-0">mdui-float-left</div>
          <div class="mdui-float-right bg box-padding mdui-m-b-0">mdui-float-right</div>
        </div>
      </div>
      <pre class="example-code"><code class="language-html">&lt;div class=&quot;mdui-clearfix&quot;&gt;
  &lt;div class=&quot;mdui-float-left&quot;&gt;mdui-float-left&lt;/div&gt;
  &lt;div class=&quot;mdui-float-right&quot;&gt;mdui-float-right&lt;/div&gt;
&lt;/div&gt;</code></pre>
    </div>


    <div class="mdui-typo">
      <h2 class="chapter-title mdui-text-color-theme">隐藏内容 <a class="anchor" id="visible"></a></h2>
      <ul>
        <li><code>.mdui-hidden</code> 类用于隐藏元素，相当于添加样式 <code>display: none;</code>，隐藏后的元素不占据页面空间。</li>
        <li><code>.mdui-invisible</code> 类用于使元素不可见，但依然会占据页面上的空间，相当于添加样式 <code>visibility: hidden;</code>。</li>
      </ul>
    </div>


    <div class="mdui-typo">
      <h2 class="chapter-title mdui-text-color-theme">响应式工具 <a class="anchor" id="responsive-utilities"></a></h2>

      <ins class="adsbygoogle"
  style="display:block;margin-bottom: 30px;"
  data-ad-client="ca-pub-4466345895756968"
  data-ad-slot="6410619709"
  
  
  data-ad-format="auto"
  data-full-width-responsive="true"
></ins>
  <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
      </script>

      <p>这些工具类通过媒体查询实现针对不同设备隐藏内容。这些工具类包括：</p>
      <ul>
        <li><code>.mdui-hidden-*</code>：在指定宽度的设备上隐藏。</li>
        <li><code>.mdui-hidden-*-up</code>：在指定宽度及以上的设备上隐藏。</li>
        <li><code>.mdui-hidden-*-down</code>：在指定宽度及以下的设备上隐藏。</li>
      </ul>
      <div class="mdui-table-fluid">
        <table class="mdui-table">
          <thead>
          <tr>
            <th></th>
            <th>超小屏幕<br/><600px</th>
            <th>小屏幕<br/>>=600px - <1024px</th>
            <th>中等屏幕<br/>>=1024px - <1440px</th>
            <th>大屏幕<br/>>=1440px - <1920px</th>
            <th>超大屏幕<br/>>=1920px</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td><code>.mdui-hidden-xs</code></td>
            <td class="is-hidden">隐藏</td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
          </tr>
          <tr>
            <td><code>.mdui-hidden-sm</code></td>
            <td class="is-visible">可见</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
          </tr>
          <tr>
            <td><code>.mdui-hidden-md</code></td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
          </tr>
          <tr>
            <td><code>.mdui-hidden-lg</code></td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-visible">可见</td>
          </tr>
          <tr>
            <td><code>.mdui-hidden-xl</code></td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
            <td class="is-hidden">隐藏</td>
          </tr>
          <tr>
            <td><code>.mdui-hidden-xs-down</code></td>
            <td class="is-hidden">隐藏</td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
          </tr>
          <tr>
            <td><code>.mdui-hidden-sm-down</code></td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
          </tr>
          <tr>
            <td><code>.mdui-hidden-md-down</code></td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
          </tr>
          <tr>
            <td><code>.mdui-hidden-lg-down</code></td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-visible">可见</td>
          </tr>
          <tr>
            <td><code>.mdui-hidden-xl-down</code></td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
          </tr>
          <tr>
            <td><code>.mdui-hidden-xs-up</code></td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
          </tr>
          <tr>
            <td><code>.mdui-hidden-sm-up</code></td>
            <td class="is-visible">可见</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
          </tr>
          <tr>
            <td><code>.mdui-hidden-md-up</code></td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
          </tr>
          <tr>
            <td><code>.mdui-hidden-lg-up</code></td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
            <td class="is-hidden">隐藏</td>
            <td class="is-hidden">隐藏</td>
          </tr>
          <tr>
            <td><code>.mdui-hidden-xl-up</code></td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
            <td class="is-visible">可见</td>
            <td class="is-hidden">隐藏</td>
          </tr>

          </tbody>
        </table>
      </div>

      <div class="space-height-sm"></div>
      <p>调整浏览器窗口、或在不同设备上查看下面的实例。深色部分表示在当前浏览器窗口中是可见的。</p>
    </div>
    <div class="example">
      <div class="example-demo">
        <div class="mdui-container-fluid">
          <div class="mdui-row">
            <div class="mdui-col-sm-6 mdui-col-md-4">
              <div class="mdui-hidden-xs is-visible">&#10004; .mdui-hidden-xs</div>
              <div class="mdui-hidden-sm-up is-hidden">.mdui-hidden-xs</div>
            </div>
            <div class="mdui-col-sm-6 mdui-col-md-4">
              <div class="mdui-hidden-sm is-visible">&#10004; .mdui-hidden-sm</div>
              <div class="mdui-hidden-md-up mdui-hidden-xs-down is-hidden">.mdui-hidden-sm</div>
            </div>
            <div class="mdui-col-sm-6 mdui-col-md-4">
              <div class="mdui-hidden-md is-visible">&#10004; .mdui-hidden-md</div>
              <div class="mdui-hidden-lg-up mdui-hidden-sm-down is-hidden">.mdui-hidden-md</div>
            </div>
            <div class="mdui-col-sm-6 mdui-col-md-4">
              <div class="mdui-hidden-lg is-visible">&#10004; .mdui-hidden-lg</div>
              <div class="mdui-hidden-xl-up mdui-hidden-md-down is-hidden">.mdui-hidden-lg</div>
            </div>
            <div class="mdui-col-sm-6 mdui-col-md-4">
              <div class="mdui-hidden-xl is-visible">&#10004; .mdui-hidden-xl</div>
              <div class="mdui-hidden-lg-down is-hidden">.mdui-hidden-xl</div>
            </div>
          </div>
          <div class="mdui-row">
            <div class="mdui-col-sm-6 mdui-col-md-4">
              <div class="mdui-hidden-xs-down is-visible">&#10004; mdui-hidden-xs-down</div>
              <div class="mdui-hidden-sm-up is-hidden">mdui-hidden-xs-down</div>
            </div>
            <div class="mdui-col-sm-6 mdui-col-md-4">
              <div class="mdui-hidden-sm-down is-visible">&#10004; mdui-hidden-sm-down</div>
              <div class="mdui-hidden-md-up is-hidden">mdui-hidden-sm-down</div>
            </div>
            <div class="mdui-col-sm-6 mdui-col-md-4">
              <div class="mdui-hidden-md-down is-visible">&#10004; mdui-hidden-md-down</div>
              <div class="mdui-hidden-lg-up is-hidden">mdui-hidden-md-down</div>
            </div>
            <div class="mdui-col-sm-6 mdui-col-md-4">
              <div class="mdui-hidden-lg-down is-visible">&#10004; mdui-hidden-lg-down</div>
              <div class="mdui-hidden-xl-up is-hidden">mdui-hidden-lg-down</div>
            </div>
            <div class="mdui-col-sm-6 mdui-col-md-4">
              <div class="mdui-hidden-xl-down is-visible">&#10004; mdui-hidden-xl-down</div>
              <div class="is-hidden">mdui-hidden-xl-down</div>
            </div>
          </div>
          <div class="mdui-row">
            <div class="mdui-col-sm-6 mdui-col-md-4">
              <div class="mdui-hidden-xs-up is-visible">&#10004; mdui-hidden-xs-up</div>
              <div class="is-hidden">mdui-hidden-xs-up</div>
            </div>
            <div class="mdui-col-sm-6 mdui-col-md-4">
              <div class="mdui-hidden-sm-up is-visible">&#10004; mdui-hidden-sm-up</div>
              <div class="mdui-hidden-xs-down is-hidden">mdui-hidden-sm-up</div>
            </div>
            <div class="mdui-col-sm-6 mdui-col-md-4">
              <div class="mdui-hidden-md-up is-visible">&#10004; mdui-hidden-md-up</div>
              <div class="mdui-hidden-sm-down is-hidden">mdui-hidden-md-up</div>
            </div>
            <div class="mdui-col-sm-6 mdui-col-md-4">
              <div class="mdui-hidden-lg-up is-visible">&#10004; mdui-hidden-lg-up</div>
              <div class="mdui-hidden-md-down is-hidden">mdui-hidden-lg-up</div>
            </div>
            <div class="mdui-col-sm-6 mdui-col-md-4">
              <div class="mdui-hidden-xl-up is-visible">&#10004; mdui-hidden-xl-up</div>
              <div class="mdui-hidden-lg-down is-hidden">mdui-hidden-xl-up</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="footer-nav mdui-color-theme">
  <div class="mdui-container">
    <div class="mdui-row">

      <a href="media.html" class="mdui-ripple mdui-color-theme mdui-col-xs-2 mdui-col-sm-6 footer-nav-left">
            <div class="footer-nav-text">
              <i class="mdui-icon material-icons">arrow_back</i>
              <span class="footer-nav-direction mdui-hidden-xs-down">Previous</span>
              <div class="footer-nav-chapter mdui-hidden-xs-down">媒体</div>
            </div>
          </a>

      <a href="shadow.html" class="mdui-ripple mdui-color-theme mdui-col-xs-10 mdui-col-sm-6 footer-nav-right">
            <div class="footer-nav-text">
              <i class="mdui-icon material-icons">arrow_forward</i>
              <span class="footer-nav-direction">Next</span>
              <div class="footer-nav-chapter">阴影</div>
            </div>
          </a>
    </div>
  </div>
</div>
<script src="../../cdn.w3cbus.com/library/mdui/1.0.2/js/mdui.min.js"></script><script src="../../cdn.w3cbus.com/mdui/docs_1/static/index.95ae2041.js"></script>
